<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- 第三种：外链方式，通常写在head元素里 -->
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
    <title>HTML第二章 - CSS3</title>
    <!-- 第二种：内嵌方式，通常写在head元素里 -->
    <style type="text/css">
      @font-face {
        font-family: 'iconfont';  /* Project id 3912472 */
        src: url('//at.alicdn.com/t/c/font_3912472_k9md2ptk1u8.woff2?t=1677134029736') format('woff2'),
            url('//at.alicdn.com/t/c/font_3912472_k9md2ptk1u8.woff?t=1677134029736') format('woff'),
            url('//at.alicdn.com/t/c/font_3912472_k9md2ptk1u8.ttf?t=1677134029736') format('truetype');
      }
      
      .button-warp button::before{
        background: #ccc;
        background: rgba(0,0,0,.1);
        float: left;        
        width: 1em;
        text-align: center;
        font-size: 1.5em;
        margin: 0 1em 0 -1em;
        padding: 0 .2em;
        box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        border-radius: .15em 0 0 .15em;     
        pointer-events: none;	
      }

      .iconfont{
        font-family: 'iconfont' !important;
      }
      .btn-add::before{
        content: '\271A';
      }
    </style>
    </head>
    <body>
      <div class="button-warp">
        <button type="button" class="btn-add"><i class="iconfont">&#xe630;</i>添加</button>
        <button type="button">删除</button>
      </div>
    </body>
</html>